<template>
	<template v-if="slotValue">
		<!-- style="width: 99%;overflow: hidden;text-overflow: ellipsis;text-align: left;"-->
		<div style="width: 100%;text-align: left;overflow: hidden;white-space:nowrap;text-overflow: ellipsis;">
		<template v-if="tooltipValue">
			<el-tooltip effect="dark" :content="tooltipValue" placement="top-start"
						 :open-delay="2000"
						 style="font-size:14px;">
				<show-label :node="slotValue"></show-label>
			</el-tooltip>
		</template>
		<template v-else>
			<show-label :node="slotValue"></show-label>
		</template>
		</div>
	</template>
</template>
<script>
import {h} from "vue";
import {ElTag} from "element-plus";
import ShowLabel from "@/components/exLabel/label.vue";
import tool from "@/utils/tool";

export default {
	name: "exLabel",
	computed: {
		tool() {
			return tool
		}
	},
	components: {ShowLabel},
	props: {
		format: {type: Boolean, default: false},//字典代码，不用设置，格式化时，添加此属性
		code: {type: String, default: ""},//字典代码或格式化的代码 ID_CARD | NAME | PHONE | MONEY | DATETIME | DATE | ICON
		value: {type: String, default: ""},
		color: {type: String, default: "#5b6bb3"},
		border: {type: Number, default: 0},
		bool: {type: Boolean, default: true},
	},
	data() {
		return {
			slotValue: null,
			tooltipValue:null,
		};
	},
	async mounted() {
		if (this.format) {
			let label = this.$TOOL.format.convert(this.value, this.code);
			if(label){
				if (label.type) {
					this.slotValue = label;
				} else {
					this.slotValue = {content: label};
				}
			}else{
				this.slotValue = {content: this.value};
			}
		} else {
			let label = await this.$cache.dic.label(this.code, this.value, this.bool);
			if (label) {
				if (label.type) {
					this.slotValue = label;
				} else {
					if(label.length>18){
						this.tooltipValue = label;
						label = label.slice(0,18)+"...";
					}
					if(this.bool){
						if (this.color) {
							//this.slotValue = h(ElTag, {size: 'small', style: "color:" + this.color +
							//"F2;background-color:#fff !important;border:none !important;"}, {default: () => label});
							this.slotValue = h(ElTag, {size: 'small', style: "color:" + this.color + "F2;background-color: " + this.color + "0D;border: "+this.border+";border-color: " + this.color+"F2;overflow: hidden;white-space:nowrap;text-overflow: ellipsis;"}, {default: () => label});
						} else {
							this.slotValue = h(ElTag, {size: 'small', style: "color:#409effF2;background-color: #409eff0D;border: "+this.border+";border-color: #409eff0D;overflow: hidden;white-space:nowrap;text-overflow: ellipsis;"}, {default: () => label});
						}
					}else{
						this.slotValue = {content:label};
					}
				}
			} else {
				this.slotValue = {content: this.value};
			}
		}
	},
	methods: {

	}
}
</script>
